<template>
  <div class="home-page-container" style="width: 897px">
    <div class="container">
      <div  class="btn">
        <el-button @click="getAllGood">全部商品</el-button>
        <el-button v-for="item in cateList" :key="item.CateName" @click="get_cateGood(item.id)">{{item.CateName}}</el-button>
      </div>
      <div class="home-page">
        <el-card v-for="item,i in this.goodList" :key="i" class="box-card">
          <div slot="header">
            <span>商品名称：{{item.name}}</span>  
            <el-button style="float: right; padding: 3px" type="primary" @click="buyGood(item.name,item.price,item.user.username,item.img,item.id,item.content)">购买</el-button>
          </div>
          <div class="item-content">
            <el-image
              style="width: 200px; height: 200px"
              :src="item.img"
              :preview-src-list="srcList">
            </el-image>
            <div class="item-content-content">
              <p>商品描述：{{item.content}}</p>
              <p>商品价格：￥{{item.price}}</p>
              <span style="color: green;margin-right:30px">发布人：{{item.user.username}}</span>
              <span><el-button type="success" plain size='small' @click="post_collection(item.img,item.name,item.price,item.user.username,item.id)">收藏</el-button></span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {getGoodList} from '@/api/homepage/index.js'
import {buyGood} from '@/api/homepage/index.js'
import {delGood} from '@/api/homepage/index.js'
import {getCate} from '@/api/homepage/index.js'
import {getCateGood} from '@/api/homepage/index.js'
import {postCollection} from '@/api/homepage/index.js'
import {delCollection} from '@/api/homepage/index.js'
export default {
  data() {
    return{
      goodList: [],
      srcList:[],
      cateList:[]
    }
  },
  methods: {
    init() {
      getGoodList().then(res => {
        console.log(res.data)
        this.goodList = res.data.data
        let arr = []
          for(let i=0;i<res.data.data.length;i++) {
            arr.push(res.data.data[i].img)
          }
          this.srcList = arr
      })
      getCate().then(res=>{
        // console.log(res.data);
        this.cateList = res.data.data
      })
    },
    getAllGood(){
      this.init()
    },
    get_cateGood(cate_id){
      getCateGood(cate_id).then(res=>{
        // console.log(res.data);
        this.goodList = res.data.data
      })
    },
    buyGood(goodName,price,sallerName,img,id,content) {
/* 对购买的商品进行总结************************************************************************** */ 
      let buyer = JSON.parse(localStorage.getItem('user'))
      // console.log(buyer);
      let buyInfo = {}
      buyInfo.goodName = goodName
      buyInfo.price = price
      buyInfo.sallerName = sallerName
      buyInfo.buyerName = buyer.username
      buyInfo.goodImg = img
      buyInfo.goodContent = content
      // console.log(buyInfo);
/* ***************************************************************************************** */ 
      // 提交购买请求
      buyGood(buyInfo).then(() => {
        // console.log(res.data);
        delGood(id).then(() => {
          this.init()
        })
        delCollection(id).then(() => {
          this.init()
        })
      })
    },
    /* ***************************************************************************************** */ 
  //提交收藏请求
  post_collection(goodImg,goodName,goodPrice,saler,goodId){
    // 组合需要提交的数据
    let user = JSON.parse(localStorage.getItem('user'))
    let collector = user.username
    let data = {}
    data.goodImg = goodImg
    data.goodName = goodName
    data.goodPrice = goodPrice
    data.saler = saler
    data.collector = collector
    data.goodId = goodId
    // console.log(goodImg,goodName,goodPrice,saler,collector);
    // console.log(data);
    //发起请求
    postCollection(data).then(res=>{
      // console.log(res.data);
      if(res.data.code == 20000) {
        this.$message.success('收藏成功')
      }
      if(res.data.code == 40000) {
        this.$message.warning('已经收藏过该商品了')
      }
      if(res.data.code == 50000) {
        this.$message.error('服务器异常，收藏失败')
      }
    })
  },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.home-page{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.box-card{
  width: 30%;
  margin: 10px auto;
}
.btn{
  margin-top: 5px;
}
</style>